<div class="h-lg fx-row-vert-cent pl-10">
  <span class="tertiary mr-10 f-600">Height</span>
  <div class="pagination-group fx-row-vert-cent bg-selected-container ml-10 border-rad-4">
    <button class="h-sm w-sm fx-row-full-cent"
            [class.disabled]="activeBlock === 1 || !activeBlock"
            [tooltip]="'Prev block'"
            [showDelay]="500"
            (click)="getBlock(activeBlock - 1)">
      <span class="mina-icon f-18">navigate_before</span>
    </button>
    <span class="f-600 selected-primary pl-5 pr-5">{{ activeBlock || '-' }}</span>
    <button class="h-sm w-sm fx-row-full-cent"
            [class.disabled]="earliestBlock === activeBlock"
            [tooltip]="'Next block'"
            [showDelay]="500"
            (click)="getBlock(activeBlock + 1)">
      <span class="mina-icon f-18">navigate_next</span>
    </button>
  </div>
  <button class="btn-secondary h-sm w-sm mr-10 ml-5 fx-row-full-cent"
          [class.disabled]="earliestBlock === activeBlock"
          [tooltip]="'Last block'"
          [showDelay]="500"
          (click)="getBlock(earliestBlock)">
    <span class="mina-icon f-18">last_page</span>
  </button>
</div>
<div class="h-lg fx-row-vert-cent flex-between w-100 pl-10">
  <div class="fx-row-vert-cent flex-wrap h-100">
    <span class="tertiary mr-10 f-600">Block candidates</span>
    <button *ngFor="let filter of allFilters"
            (click)="toggleFilter(filter)"
            class="mr-5 border-rad-6 f-600 fx-row-vert-cent"
            [ngClass]="activeFilters.includes(filter) ? 'btn-selected' : 'btn-primary'">
      <span>{{ filter | truncateMid }}</span>
    </button>
  </div>

  <button class="h-sm w-sm fx-row-full-cent btn-selected p-0 mr-10"
          (click)="toggleSidePanel()">
    <span class="mina-icon f-20">view_sidebar</span>
  </button>
</div>


